<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	 <meta charset="utf-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	 <title th:replace="common/base::pagetitle"></title>
	 <link th:replace="common/base::static"/>
	 <link rel="stylesheet" th:href="@{/static/plugins/easyui/themes/material/easyui.css}">
	 <link rel="stylesheet" th:href="@{/static/plugins/easyui/themes/icon.css}">
	 <link rel="stylesheet" th:href="@{/static/css/wlb-treegrid.css}">
</head>
<body style="background-color: #f2f2f2;">

<div id="kPage" class="layui-fluid" style="padding: 0">
	 <div class="layui-row">
		  <!-- 主要内容块 -->
		  <div class="layui-col-md12" id="kMainContentCol">
				<div class="layui-fluid wlb-fluid-padding15">
					 <div class="layui-card">
						  <div class="layui-card-body">
								<table id="kTreeGrid" style="height: 545px"></table>
						  </div>
					 </div>
				
				</div>
		  </div>
	 </div>
</div>

<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script th:src="@{/static/plugins/easyui/easyloader.js}"></script>

<!--表格行工具栏模板-->
<script type="text/html" id="rowToolbarTpl">
	 {{# if(d.parentId !== 0) { }}
	 {{# if(d.status == 'UP') { }}
	 <a class="layui-btn layui-btn-xs layui-btn-normal" data-event="down" onclick="active.down(this)"
		 data-id="{{d.serviceId}},{{d.ip}},{{d.port}}" data-type="{{d.type}}">
		  <i class="layui-icon layui-icon-delete"></i>
		  下线
	 </a>
	 {{# } else { }}
	 <a class="layui-btn layui-btn-xs" data-event="up" onclick="active.up(this)"
		 data-id="{{d.serviceId}},{{d.ip}},{{d.port}}" data-type="{{d.type}}">
		  <i class="layui-icon layui-icon-add-1"></i>
		  上线
	 </a>
	 {{# } }}
	 {{# } else { }}
	 {{# } }}
</script>

<script type="text/javascript" th:inline="none">
    var active;
    layui.use(['element', 'form', 'layer', 'table', 'laytpl'], function () {
        var elemet = layui.element, form = layui.form, layer = layui.layer;
        var treeGridId = 'kTreeGrid';
        var area = ['450px', '366px'];

        var treeGridInst;
        easyloader.load('treegrid', function () {

            treeGridInst = $('#' + treeGridId).treegrid($.extend(config.easyui.treegrid, {
                url: api.devops.serviceListData,
                method: 'get',
                idField: 'id',
                treeField: 'serviceId',
                toolbar: '#headToolbarTpl',
                onExpand: function (row) {
                    treeGridKit.fitRightFrozenCol(treeGridInst);
                },
                onCollapse: function (row) {
                    treeGridKit.fitRightFrozenCol(treeGridInst);
                },
                loadFilter: function (r) {
                    var rows = r.data;
                    r.rows = rows;
                    for (var i = 0; i < rows.length; i++) {
                        if (rows[i].parentId !== 0) {
                            rows[i]._parentId = rows[i].parentId;
                        }

                        // if (rows[i].type !== 0) {
                        //     rows[i].state = "open";
                        // } else {
                        //     rows[i].state = "closed";
                        // }
                    }
                    return r;
                },
                onLoadSuccess: function (row, data) {
                    treeGridKit.fitRightFrozenCol(treeGridInst);
                },
                frozenColumns: [[
                    {field: 'toolbar', title: '操作', width: 200, align: 'center', fixed: true, formatter: formatter.rowToolbar}
                ]],
                columns: [[
                    {field: 'serviceId', title: '服务ID', width: 150, fixed: true}
                    , {field: 'instanceId', title: '实例ID', width: 300, fixed: true}
                    , {field: 'ip', title: 'ip', width: 120, fixed: false}
                    , {field: 'port', title: '端口', width: 50, fixed: false}
                    , {field: 'status', title: '状态', width: 120, fixed: false}
                ]]

            }));

            treeGridKit.setPager(treeGridInst);
        });

        // 监听事件
        active = {
            up: function (that) {
                layer.confirm('确定上线吗？', function (index) {
                    var id = $(that).data('id');
                    var arr = id.split(',');
                    var data = {"serviceId": arr[0], "ip": arr[1], "port": arr[2]};
                    //执行 Ajax 后重载
                    $.ajax({
                        type: req.type.post,
                        url: api.devops.serviceUp,
                        data: data,
                        // async: false,
                        success: function (r) {
                            if (r.code === req.status.ok) {
                                treeGridKit.reload(treeGridInst);
                                wlbKit.sucessMsg('已上线，请手动刷新页面！');
                            } else {
                                wlbKit.errorMsg(r.msg);
                            }
                        }
                    });
                });
            },
            down: function (that) {
                layer.confirm('确定下线吗？', function (index) {
                    var id = $(that).data('id');
                    var arr = id.split(',');
                    var data = {"serviceId": arr[0], "ip": arr[1], "port": arr[2]};
                    //执行 Ajax 后重载
                    $.ajax({
                        type: req.type.post,
                        url: api.devops.serviceDown,
                        data: data,
                        // async: false,
                        success: function (r) {
                            if (r.code === req.status.ok) {
                                treeGridKit.reload(treeGridInst);
                                //TODO nacos刷新较慢，所以此处不见得能刷新出来最新状态
                                wlbKit.sucessMsg('已下线，请手动刷新页面！');
                            } else {
                                wlbKit.errorMsg(r.msg);
                            }
                        }
                    });
                });
            }
        };

        wlbKit.activeInit(active);

        $(window).resize(function () {
            treeGridKit.fitRightFrozenCol(treeGridInst);
        });

        // 列格式化函数
        var formatter = {
            rowToolbar: function (value, row, index) {
                return wlbKit.renderTpl('rowToolbarTpl', row);
            }
        };

        // 监听查询
        form.on('submit(kTableSearchFilter)', function (obj) {
            var params = obj.field;
            log('seach=', params); //

            $.get(api.devops.serviceListData, params, function (r) {
                r.type = 'q';
                treeGridInst.treegrid('loadData', r);
            }, 'json');

            return false;
        });

        // 绑定监听回车事件
        wlbKit.bindEnterEventForLayuiForm();

    });
</script>

</body>
</html>